<!--适用于商品详情页tab-->
<!-- 用法示例：
纵向滚动
<tabs :tabsList="tabsList" scrollY >
	<tabItem v-for="(item, index) in dataList" :key="index" :index="index" :title="item.title">
		<view class="content">
			<rich-text :nodes="item.content" />		   
		</view>
	</tabItem>
</tabs>
横向滚动
<tabs :tabsList="tabsList" scrollX >
	<swiper-item>
		<view>A</view>
	</swiper-item>
	<swiper-item>
		<view>B</view>
	</swiper-item>
	<swiper-item>
		<view>C</view>
	</swiper-item>
</tabs>
-->
<template>
<view class="comp-tabs-scroll-swiper">
	<basic-sticky v-if="sticky" :zIndex="100000" :offsetTop="stickyTop">
		<view class="tabs-list">
			<text class="tabs-item" 
				:class="{active:index === tabIndex}"
				v-for="(item,index) in tabsList" :key="item.value" 
				@tap="change(item, index)"
			>
			{{item.label}}
			</text>
		</view>
	</basic-sticky>

	<view v-else class="tabs-list">
		<text class="tabs-item" 
			:class="{active:index === tabIndex}" 
			v-for="(item,index) in tabsList" :key="item.value" 
			@tap="change(item, index)"
		>
		{{item.label}}
		</text>
	</view>
	
	<!-- 纵向滚动 -->
	<view class="scroll--wrap" v-if="scrollY">
		<scroll-view 
			scroll-y="true" 
			class="scroll-view-content"
			:style="{height}"
			:scroll-into-view="'tabs-scroll-'+ contentIndex"
			@scroll="scroll"
		>
			<slot />
		</scroll-view>						
	</view>	
	<!-- 横向滚动 -->
	<view class="swiper--wrap" v-else-if="scrollX">
		<swiper class="swiper" :current="contentIndex" @change="swiperChange">
		<slot />
		</swiper>
	</view>	
	<view class="swiper--wrap" v-else-if="sticky">
		<view class="sticky-wrapper">
			<slot />
		</view>
	</view>	
</view>
</template>
<script>
import { throttle } from "utils/helper/throttle"
import sdk from 'sdk'
export default {
	props: {
		tabsList: {
			type: Array,
			default: ()=> []
		},
		height: { type: String, default:'1000rpx' },
		scrollY: { type: Boolean, default:false },
		scrollX: { type: Boolean, default:false },
		sticky: { type: Boolean, default:false }, // 吸顶效果
		stickyTop: { type: [String, Number], default: 0} // 吸顶距离
	},
	watch: {
	},
	data(){
		return {
			tabIndex:0,
			contentIndex: 0,
			tabBarHeight: 0
		}
	},
	mounted() {
		sdk.getOffset('.tabs-list', null, this).then(res=>{
			this.tabBarHeight = res.height
		})
	},
	methods: {
		change(item, index){
			this.contentIndex = index
			this.tabIndex = index

			this.$emit('change', index, this.tabBarHeight)
		},
		scroll(e) {
			if(this.scrollY) {
				throttle(() => {
					sdk.getAllOffset('.scroll-view-item', '.scroll-view-content', this).then(
					(res) => {
						res.forEach((child, index) => {
							if ( e.detail.scrollTop >= child.top - this.tabBarHeight ) {
								this.tabIndex = index
							}
						})
					}
					)
				}, 100);
			}
		},
		swiperChange(e) {
			this.change(null, e.detail.current)
		}
	}
}
</script>
<style lang="less">
.comp-tabs-scroll-swiper{
	.tabs-list{
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: relative;
		border-bottom: 1rpx solid #EAEAEA;
		background: #ffffff;
		.tabs-item{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			padding: 30rpx;
			position: relative;
			&.active{
				font-size: 32rpx;
				font-weight: 600;
				&::after{
					content:'';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					background: @theme_color;
					width: 48rpx;
					height: 4rpx;
					border-radius: 2rpx;
				}
			}		
		}
	}

	.sticky-wrapper {
		padding: 0 30rpx;
	}
	
	.scroll-view-content{
		height: 800rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
}
</style>



